<template>
  <a-card :bordered="false" :loading="loading">
    <a-form :model="detailData" :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }">
      <a-tabs v-model:active-key="activeKey">
        <a-tab-pane :key="1" tab="乡村基本信息">
          <a-form-item label="乡村名称" name="name">
            <a-input v-model:value="detailData.name" disabled />
          </a-form-item>
          <a-form-item label="封面" name="cover">
            <upload-image
              :image-str="detailData.cover"
              :component-props="{ maxCount: 1, disabled: true }"
            />
          </a-form-item>
          <a-form-item label="乡村地点">
            <div class="flex justify-between">
              <a-input v-model:value="detailData.address" class="m-r-4" disabled />
              <a-input v-model:value="detailData.detailedAddress" disabled />
            </div>
          </a-form-item>
          <a-form-item label="乡村简介" name="briefIntro">
            <a-textarea v-model:value="detailData.briefIntro" disabled />
          </a-form-item>
          <a-form-item label="联系方式" name="mobile">
            <a-input v-model:value="detailData.mobile" disabled />
          </a-form-item>
          <a-form-item label="轮播图片" name="images">
            <upload-image
              :image-str="detailData.images"
              :component-props="{ maxCount: 3, disabled: true }"
            />
          </a-form-item>
          <a-col :span="24">
            <a-form-item
              label="详细介绍"
              name="introduce"
              :label-col="{ span: 3 }"
              :wrapper-col="{ span: 21 }"
            >
              <tinymce-editor
                v-model:value="detailData.introduce"
                placeholder="详细介绍"
                disabled
              ></tinymce-editor>
            </a-form-item>
          </a-col>
          <a-row :gutter="1">
            <a-col :span="3"> </a-col>
            <a-col :span="10">
              <a-form-item label="创建时间" name="createTime">
                <a-date-picker
                  :value="formatToDateTime(detailData.createTime, format)"
                  :value-format="format"
                  :format="format"
                  show-time
                  disabled
                />
              </a-form-item>
            </a-col>
            <a-col :span="10">
              <a-form-item label="更新时间" name="updateTime">
                <a-date-picker
                  :value="formatToDateTime(detailData.updateTime, format)"
                  :value-format="format"
                  :format="format"
                  show-time
                  disabled
                />
              </a-form-item>
            </a-col>
          </a-row>
        </a-tab-pane>
      </a-tabs>
      <a-form-item :wrapper-col="{ span: 24 }">
        <div class="text-center">
          <a-button
            v-if="$auth('rustic-update')"
            class="mr-50px"
            type="primary"
            @click="router.push(`/rustic/rusticEdit?id=${detailData.id}`)"
            >编辑</a-button
          >
          <a-button @click="closeTab">返回</a-button>
        </div>
      </a-form-item>
    </a-form>
  </a-card>
</template>

<script setup lang="tsx">
  import { message } from 'ant-design-vue';
  import { formatToDateTime } from '@/utils/dateUtil';
  import DynamicForm from '@/components/dynamicForm/index.vue';
  import useRequestDetail from '@/hooks/useRequestDetail';
  import { rusticApi, createRustic, updateRustic } from '@/api/rustic/rustic';
  import { useTabsViewStore } from '@/store/modules/tabsView';
  import { ComponentsTypeEnum } from '@/enums/componentsEnum';
  import { useUserStore } from '@/store/modules/user';

  defineOptions({
    name: 'rusticDetail',
  });

  const format = 'YYYY-MM-DD HH:mm';
  const route = useRoute();
  const router = useRouter();
  const activeKey = ref<number>(1);
  const tabsViewStore = useTabsViewStore();
  const userStore = useUserStore();
  const rusticId = userStore.getRusticId();
  const { detailData, loading, setParams } = useRequestDetail({
    apiKey: rusticApi.rusticDetail,
    initParams: {
      id: rusticId,
    },
    isMount: rusticId != null && rusticId !== 0,
    // initParams: route?.query,
    // isMount: !!Object.values(route?.query).length && !!Object.values(route?.query)[0],
  });
  const submitForm = async (params) => {
    const rusticId = route?.query?.id;
    const res = rusticId
      ? await updateRustic({
          ...params,
          id: rusticId,
        })
      : await createRustic(params);
    if (res) {
      message.success(res?.msg);
      closeTab();
    }
  };

  const closeTab = () => {
    tabsViewStore.closeCurrentTab(route);
  };
</script>

<style></style>
